import { NDynamicTags } from "naive-ui";
import { getSlotsDom } from "../utils";
import type {
  DynamicTagsProps,
  DynamicTagsInputSlotProps,
  DynamicTagsTriggerSlotProps,
} from "naive-ui";
import type { BaseComponentType, OmitHTMLAttributes } from "../types";

export type DynamicTagsFactoryConstructorType = {
  props?: DynamicTagsProps;
  attrs?: OmitHTMLAttributes<"onChange" | "color">;
  inputSlot?: (v?: DynamicTagsInputSlotProps) => BaseComponentType;
  triggerSlot?: (v?: DynamicTagsTriggerSlotProps) => BaseComponentType;
};
export class DynamicTagsFactory {
  private attrs: OmitHTMLAttributes<"onChange" | "color"> = {};
  private props: DynamicTagsProps = {};
  private inputSlot: (v?: DynamicTagsInputSlotProps) => BaseComponentType =
    () => null;
  private triggerSlot: (v?: DynamicTagsTriggerSlotProps) => BaseComponentType =
    () => null;

  constructor(data?: DynamicTagsFactoryConstructorType) {
    if (data?.props) this.setProps(data.props);
    if (data?.attrs) this.setAttrs(data.attrs);
    if (data?.inputSlot) this.setInput(data.inputSlot);
    if (data?.triggerSlot) this.setTrigger(data.triggerSlot);
  }
  setAttrs(attrs: OmitHTMLAttributes<"onChange" | "color">) {
    this.attrs = attrs;
    return this;
  }

  setProps(props: DynamicTagsProps) {
    this.props = props;
    return this;
  }

  setInput(component: (v?: DynamicTagsInputSlotProps) => BaseComponentType) {
    this.inputSlot = component;
    return this;
  }

  setTrigger(
    component: (v?: DynamicTagsTriggerSlotProps) => BaseComponentType
  ) {
    this.triggerSlot = component;
    return this;
  }

  create() {
    return (
      <NDynamicTags {...this.attrs} {...this.props}>
        {{
          input: (v: DynamicTagsInputSlotProps) =>
            getSlotsDom(this.inputSlot(v)),
          trigger: (v: DynamicTagsTriggerSlotProps) =>
            getSlotsDom(this.triggerSlot(v)),
        }}
      </NDynamicTags>
    );
  }
}
